<template>
  <div>
    <a-modal v-model="visible" centered title="新增导购" width="60vw" @ok="handleOk" @cancel="cancel" :destroyOnClose="true" class="addbox">
      <!-- <s-table ref="table" size="default" bordered :rowKey="record => record.id" :columns="columns" :data="loadData" :rowSelection="rowSelection" :pagination="pagination">
        <span slot="serial" slot-scope="text, record, index">
          {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
        </span>
      </s-table> -->
      <a-table :rowKey="record => record.guideId" :row-selection="rowSelection" :columns="columns" :data-source="list" :pagination="pagination"></a-table>
    </a-modal>
  </div>
</template>
<script>
import { STable } from '@/views/box/components'
const columns = [
  {
    title: '导购ID',
    align: 'center',
    dataIndex: 'guideId'
  },
  {
    title: '导购名称',
    align: 'center',
    dataIndex: 'rangeName'
  },
  {
    title: '手机号',
    align: 'center',
    dataIndex: 'guideTel'
  },
  {
    title: '所属门店',
    align: 'center',
    dataIndex: 'guideStore'
  },
]
export default {
  components: {
    STable
  },
  props: {
    loadData: {
      type: Array,
      default: []
    },
    guideVisible: {
      type: Boolean,
      default: false
    },
    // 选中行--0509
    selected: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columns,
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      roleList: [],
      selectedRowKeys: [],
      selectedRows: [],
      removeKeys: [],
      list:[]
    }
  },
  watch:{
    visible(){
      let selected = this.$props.selected
      this.selectedRows = [].concat(selected)
      this.selectedRowKeys = selected.map(item => item.guideId)
      this.removeKeys = []
      this.list = this.$props.loadData.filter(item => !this.selectedRowKeys.includes(item.guideId))
    }
  },
  computed: {
    visible: {
      get() {
        return this.guideVisible
      },
      set(val) {
        this.$emit('update:guideVisible', val)
      }
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        onSelect: this.onSelect,
        onSelectAll: this.onSelectAll
      }
    }
  },
  mounted() {
  },
  methods: {
    // 关闭
    cancel() {
      this.visible = false
      this.selectedRows = []
      this.selectedRowKeys = []
    },
    handleOk(){
        // this.visible = false
        console.log('====',this.selectedRows,this.selectedRowKeys)
        this.$emit('handleOk',this.selectedRows)
    },
    onChange(value) {
      this.roleCode = value
    },
    onSelect(record, selected, selectedRows) {
      selected
        ? this.selectedRows.push(record)
        : this.selectedRows.splice(
            this.selectedRows.findIndex(x => x.guideId === record.guideId),
            1
          )
    },
    onSelectAll(selected, selectedRows, changeRows) {
      this.selectedRows = selected ? this.selectedRows.concat(changeRows) : this.selectedRows.filter(x => !changeRows.find(i => i.guideId === x.guideId))
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.$nextTick(() => {
        this.selectedRowKeys = selectedRowKeys
      })
    }
  }
}
</script>
<style lang="less" scoped>
.addbox {
  height: 60vh;
}
.select-box {
  display: flex;
  margin: 30px 0;
}
</style>
